import { StyleSheet } from 'react-native';

export const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#f5f5f5',
    },
    header: {
        height: 60,
        backgroundColor: '#1e3a8a',
        justifyContent: 'center',
        alignItems: 'center',
        position: 'relative',
        overflow: 'hidden',
    },
    headerBackground: {
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        width: '100%',
        height: '100%',
    },
    headerContent: {
        flexDirection: 'row',
        alignItems: 'center',
        paddingHorizontal: 20,
        zIndex: 1,
        width: '100%',
        position: 'relative',
    },
    logo: {
        width: 32,
        height: 32,
        position: 'absolute',
        left: 20,
    },
    headerText: {
        fontSize: 18,
        fontWeight: 'bold',
        color: '#ffffff',
        textShadowColor: 'rgba(0, 0, 0, 0.3)',
        textShadowOffset: { width: 1, height: 1 },
        textShadowRadius: 2,
        flex: 1,
        textAlign: 'center',
    },
    backButton: {
        position: 'absolute',
        left: 20,
        top: 14.5,
        zIndex: 2,
        width: 32,
        backgroundColor: '#ffffff',
        borderRadius: 16,
        height: 32,
        justifyContent: 'center',
        alignItems: 'center',
    },
    backIcon: {
        width: 24,
        height: 24,
    },
    content: {
        flex: 1,
        padding: 10,
        backgroundColor: '#f8f9fa',
    },
    contentText: {
        fontSize: 48,
        fontWeight: 'bold',
        color: '#333333',
    },
    // 新增样式
    datePickerContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-end',
        marginBottom: 10,
        paddingHorizontal: 10,
    },
    datePickerLabel: {
        fontSize: 16,
        color: '#333',
        marginRight: 10,
    },
    dateSelector: {
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor: '#ffffff',
        paddingHorizontal: 15,
        paddingVertical: 10,
        borderRadius: 8,
        borderWidth: 1,
        borderColor: '#ddd',
        minWidth: 120,
    },
    dateText: {
        fontSize: 16,
        color: '#333',
        marginRight: 8,
    },
    arrowIcon: {
        width: 16,
        height: 16,
    },
    scoreContainer: {
        backgroundColor: '#ffffff',
        borderRadius: 12,
        padding: 20,
        marginHorizontal: 15,
        shadowColor: '#000',
        shadowOffset: {
            width: 0,
            height: 2,
        },
        shadowOpacity: 0.1,
        shadowRadius: 3.84,
        elevation: 5,
    },
    scoreTitle: {
        fontSize: 20,
        fontWeight: 'bold',
        color: '#333',
        textAlign: 'center',
        marginBottom: 20,
    },
    scoreContent: {
        alignItems: 'center',
    },
    scoreText: {
        fontSize: 16,
        color: '#666',
        marginBottom: 10,
    },
    // 新增卡片样式
    cardsContainer: {
        marginBottom: 0,
        paddingHorizontal: 15,
    },
    cardRow: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        marginBottom: 15,
    },
    card: {
        flex: 1,
        backgroundColor: '#ffffff',
        borderRadius: 12,
        padding: 15,
        marginHorizontal: 2,
        shadowColor: '#000',
        shadowOffset: {
            width: 0,
            height: 2,
        },
        shadowOpacity: 0.1,
        shadowRadius: 3.84,
        elevation: 5,
        minHeight: 240,
        maxWidth: '24%',
    },
    cardTitle: {
        fontSize: 12,
        fontWeight: 'bold',
        color: '#333',
        textAlign: 'center',
        marginBottom: 0,
    },
    cardContent: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    cardPlaceholder: {
        fontSize: 10,
        color: '#999',
        textAlign: 'center',
        fontStyle: 'italic',
    },
    // 新增工作记录样式
    workRecordsContainer: {
        marginBottom: 10,
        paddingHorizontal: 20,
        flex: 1,
    },
    workRecordsTitle: {
        fontSize: 14,
        fontWeight: 'bold',
        color: '#333',
        marginBottom: 5,
        textAlign: 'left',
    },
    // 表格样式
    tableContainer: {
        backgroundColor: '#ffffff',
        borderRadius: 12,
        elevation: 3,
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.1,
        shadowRadius: 4,
        overflow: 'hidden',
    },
    tableHeader: {
        flexDirection: 'row',
        backgroundColor: '#e3f2fd',
        paddingVertical: 12,
        paddingHorizontal: 8,
        borderBottomWidth: 1,
        borderBottomColor: '#e0e0e0',
    },
    tableHeaderCell: {
        flex: 1,
        fontSize: 12,
        fontWeight: 'bold',
        color: '#333333',
        textAlign: 'center',
        borderRightWidth: 1,
        borderRightColor: '#e0e0e0',
        paddingHorizontal: 4,
    },
    tableHeaderCellLast: {
        flex: 1,
        fontSize: 12,
        fontWeight: 'bold',
        color: '#333333',
        textAlign: 'center',
        borderRightWidth: 0,
        borderRightColor: '#e0e0e0',
        paddingHorizontal: 4,
    },
    tableBody: {
        maxHeight: 170,
    },
    tableRow: {
        flexDirection: 'row',
        paddingVertical: 10,
        paddingHorizontal: 8,
        borderBottomWidth: 1,
        borderBottomColor: '#f0f0f0',
        backgroundColor: '#ffffff',
    },
    tableCell: {
        flex: 1,
        fontSize: 11,
        color: '#333333',
        textAlign: 'center',
        justifyContent: 'center',
        alignItems: 'center',
        borderRightWidth: 1,
        borderRightColor: '#e0e0e0',
        paddingHorizontal: 4,
    },
    tableCellLast: {
        flex: 1,
        fontSize: 11,
        color: '#333333',
        textAlign: 'center',
        justifyContent: 'center',
        alignItems: 'center',
        borderRightWidth: 0,
        borderRightColor: '#e0e0e0',
        paddingHorizontal: 4,
    },
    // 用户信息卡片样式
    userAvatarContainer: {
        alignItems: 'center',
        marginBottom: 10,
    },
    userAvatar: {
        width: 87,
        height: 87,
        borderRadius: 47,
        borderWidth: 2,
        borderColor: '#e0e0e0',
    },
    userInfoContainer: {
        flex: 1,
        justifyContent: 'flex-start',
        alignItems: 'flex-start',
        paddingHorizontal: 5,
    },
    userInfoLabel: {
        fontSize: 10,
        color: '#333',
        marginBottom: 5,
        textAlign: 'left',
        lineHeight: 14,
    },
    // 分页组件样式
    paginationContainer: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        paddingVertical: 5,
        paddingHorizontal: 10,
        backgroundColor: '#ffffff',
        borderTopWidth: 1,
        borderTopColor: '#e0e0e0',
    },
    pageButton: {
        paddingHorizontal: 10,
        paddingVertical: 8,
        marginHorizontal: 4,
        borderRadius: 6,
        backgroundColor: '#f5f5f5',
        borderWidth: 1,
        borderColor: '#e0e0e0',
        minWidth: 36,
        alignItems: 'center',
        justifyContent: 'center',
    },
    pageButtonActive: {
        backgroundColor: '#1e3a8a',
        borderColor: '#1e3a8a',
    },
    pageButtonDisabled: {
        backgroundColor: '#f0f0f0',
        borderColor: '#d0d0d0',
    },
    pageButtonText: {
        fontSize: 14,
        color: '#333',
        fontWeight: '500',
    },
    pageButtonTextActive: {
        color: '#ffffff',
        fontWeight: 'bold',
    },
    pageButtonTextDisabled: {
        color: '#999',
    },
    pageEllipsis: {
        fontSize: 14,
        color: '#666',
        marginHorizontal: 8,
        fontWeight: 'bold',
    },
    totalInfoText: {
        fontSize: 14,
        color: '#666',
        marginLeft: 16,
        fontWeight: '500',
    },
    // 加载和空数据状态样式
    loadingContainer: {
        paddingVertical: 40,
        alignItems: 'center',
        justifyContent: 'center',
    },
    noDataContainer: {
        paddingVertical: 40,
        alignItems: 'center',
        justifyContent: 'center',
    },
    loadingText: {
        fontSize: 16,
        color: '#999',
        textAlign: 'center',
        fontStyle: 'italic',
    },
    noDataText: {
        fontSize: 16,
        color: '#999',
        textAlign: 'center',
        fontStyle: 'italic',
    },
}); 